@charset "UTF-8";

/* 基本样式 */
* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

body {
    height: 100%;
    background-image: url('../images/background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}
	      /* 设置导航栏 */
	        .navbar {
				 background: linear-gradient(to bottom, rgb(152, 84, 48), rgb(0, 0, 0)); /* 上到下的渐变色 */
	           /* background-color: rgb(152, 84, 48); /* 导航栏背景色 */
	            overflow: hidden; /* 确保导航栏内容不溢出 */
	            position: fixed; /* 固定在页面顶部 */
	            top: 0;
	            min-height: 30px;
            	width: 100%;
	            z-index: 1000; /* 确保导航栏在页面内容上方 */
	        }
	
	        .navbar a {
	            float: left; /* 左对齐首页标签 */
	            color: white;
	            text-align: center;
	            padding: 20px 20px;
	            text-decoration: none;
	            font-size: 20px;
	        }
	
	        .navbar a:hover {
	            background-color: rgb(243, 227, 186);
	            color: rgb(150, 78, 50);
	            width: 8%;
	            height: 100%;
	        }
	
	        .navbar .right {
	            float: right; /* 右对齐点击字体 */
	        }
	        
	        .navbar .right i {
			    margin-left: 8px;  /* 使图标和文字有间距 */
			}
		

/* 页面容器 */
.container {
	
    width: 90%;
    margin: 0 auto;
    font-family: "SimSun", sans-serif;
    max-width: 1200px;
    margin-top: 100px; /* 确保页面内容不被导航栏遮挡 */
}

/* 头部样式 */
.header {
			margin-top: 110px; /* 确保标题不被固定的导航栏遮挡 */
            font-size: 42px;
            font-weight: bold;
            text-align: center;
            line-height: 100px;
            color: rgb(241, 231, 207);
            margin-bottom: 50px; 
}


/* 消息列表样式 */
.message-section {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

/* 左侧消息列表样式 */
.message-list {
    width: 45%;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.message-list h2 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #6f4f28; /* 深棕色 */
}

.message-item {
    border-bottom: 1px solid #e0c4a1; /* 浅棕色分隔线 */
    padding: 15px 0;
    cursor: pointer;
}

.message-item:last-child {
    border-bottom: none;
}

.message-title {
    font-weight: bold;
    font-size: 18px;
}

.message-from {
    font-size: 14px;
    color: #a88e5f; /* 浅棕色时间 */
    margin-left: 10px;
}

/* 右侧消息详情样式 */
.message-detail-view {
    width: 50%;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.message-detail {
    display: none;
}

.message-detail p {
    font-size: 16px;
     color: rgb(0, 0, 0);
     }

/* 默认消息提示 */
#default-message {
    color: #888;
    font-size: 16px;
}

/* 页脚样式 */
.footer {
    text-align: center;
    padding: 10px;
    background-color: #6f4f28; /* 深棕色 */
    color: white;
    margin-top: 20px;
}

#message-detail-content {
    display: block !important;
}

.report-detail {
   /* 详情内容的样式 */
   line-height: 1.6; /* 增加行高，提高可读性 */
   color: #333;
   max-height: 400px; /* 设置一个最大高度，这个值可能需要根据实际情况调整 */
   overflow-y: auto; /* 内容超出最大高度时显示垂直滚动条 */
   padding-right: 15px; /* 为滚动条留出空间，避免文字被滚动条遮挡 */
}

.report-detail p {
    margin-bottom: 8px; /* 详情段落间距 */
}
